<template>
  <div>
    <Form :model="formItem" v-if="formItem">
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>居住方式：</span>
            </template>
            <RadioGroup v-model="formItem.jz_mode" style="width: 100%">
              <span @click="updatejzMode('借住房屋')"><Radio :disabled="formItem.operation === '2'" :label="'借住房屋'">借住房屋</Radio></span>
              <span @click="updatejzMode('租赁房屋')"><Radio :disabled="formItem.operation === '2'" :label="'租赁房屋'">租赁房屋</Radio></span>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>补贴标准：</span>
            </template>
            <RadioGroup v-if="RadioGroupType" @on-change="obtain" v-model="formItem.subsidy_mode" style="width: 100%;">
              <div  v-for="item in list" v-bind:key="item" value="item" style="float: left">
                <Radio style="width: 20%;" :disabled="formItem.operation === '2'" :label="item">{{ item }}%</Radio>
              </div>
              <!--              <Radio :disabled="formItem.operation === '2'" :label='100'>100%</Radio>-->
              <!--              <Radio :disabled="formItem.operation === '2'" :label='68.57'>68.57%</Radio>-->
              <!--              <Radio :disabled="formItem.operation === '2'" :label='50'>50%</Radio>-->
              <!--              <Radio :disabled="formItem.operation === '2'" :label='34.29'>34.29%</Radio>-->
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>房屋建筑面积（㎡）：</span>
            </template>
            <InputNumber style="width: 100%" :min="0" :disabled="formItem.operation === '2'" @on-change="obtain" v-model="formItem.fc_m2"></InputNumber>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span>房产证号：</span>
            </template>
            <input maxlength="30" class="borrow-input" v-if="formItem.operation !== '2'" v-model="fc_no"></input>
            <Input disabled v-if="formItem.operation === '2'" v-model="formItem.fc_no"></Input>
          </FormItem>
        </Col>
        <Col span="16">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>取暖救助报销地址：</span>
            </template>
            <div class="inputClass">
              <Select :disabled="formItem.operation === '2'" v-model="formItem.city" :lable-in-value="true" placeholder="选择区" style="width: 15%;padding-right: 5px" @on-change="getMailListInfo(formItem.city,'streetList')">
                <Option v-for="item in arrayData.cityList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
              </Select>
              <Select :disabled="formItem.operation === '2'" v-model="formItem.street" placeholder="选择街道"  style="width: 15%;padding-right: 5px" @on-change="getMailListInfo(formItem.street, 'communityList')">
                <Option v-for="item in arrayData.streetList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
              </Select>
              <Select :disabled="formItem.operation === '2'" v-model="formItem.community" placeholder="选择社区" style="width: 15%;padding-right: 5px">
                <Option v-for="item in arrayData.communityList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
              </Select>
              <Input maxlength="50" :disabled="formItem.operation === '2'" v-model="formItem.d_address" placeholder="详细地址" style="width: 55%"></Input>
            </div>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span>补贴面积上限（㎡）：</span>
            </template>
            <Input disabled v-model="formItem.subsidy_m2up"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span>采暖报销单价（元/㎡）：</span>
            </template>
            <InputNumber @on-change="obtain" style="width: 100%" :max="26" :min="0" :disabled="formItem.operation === '2'" v-model="formItem.subsidy_rmbone"></InputNumber>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span>采暖费补贴金额（元）：</span>
            </template>
            <Input v-if="borrowType" disabled v-model="formItem.subsidy_rmb"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span>个人承担金额（元）：</span>
            </template>
            <Input disabled v-model="formItem.persion_rmb"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="24">
          <FormItem label="备注">
            <Input maxlength="300" show-word-limit :disabled="paramsData.operation === '2'" type="textarea" v-model="formItem.cn_rmb_all"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <!--    <Divider style="margin: 10px 0" />-->
  </div>
</template>
<script>
import { postCN } from '@/api/eventlist'
export default {
  props: {
    paramsData: Object
  },
  data () {
    return {
      list: [],
      fc_no: '',
      RadioGroupType: true,
      formItem: null,
      cityList: [],
      arrayData: {},
      borrowType: true
    }
  },
  methods: {
    getMailListInfo (param, list) {
      let paramData = {}
      if (param) {
        paramData = JSON.parse(param)
      }
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      postCN(data).then(res => {
        if (list === 'streetList') {
          this.formItem.street = ''
          this.formItem.community = ''
        }
        if (list === 'communityList') {
          this.formItem.community = ''
        }
        this.$set(this.arrayData, list, res.data.data.downList)
      })
    },
    getMailList (param, list) {
      console.log('uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu')
      let paramData = JSON.parse(param)
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          // list = res.data.data.downList
          this.$set(this.arrayData, list, res.data.data.downList)
          let that = this
          console.log(that.formItem.area)
          if (that.formItem.area) {
            that.arrayData.cityList.forEach(function (item) {
              if (item.name === that.formItem.area) {
                that.formItem.city = JSON.stringify(item)
                that.getMailList2(that.formItem.city, 'streetList')
              }
            })
          }
        }
      })
    },
    getMailList2 (param, list) {
      let paramData = JSON.parse(param)
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      let that = this
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          that.$set(this.arrayData, list, res.data.data.downList)
          that.arrayData.streetList.forEach(function (item) {
            if (item.name === that.formItem.street) {
              that.formItem.street = JSON.stringify(item)
              that.getMailList3(that.formItem.street, 'communityList')
            }
          })
        }
      })
    },
    getMailList3 (param, list) {
      let paramData = JSON.parse(param)
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          this.$set(this.arrayData, list, res.data.data.downList)
          let that = this
          that.arrayData.communityList.forEach(function (item) {
            if (item.name === that.formItem.community) {
              that.formItem.community = JSON.stringify(item)
            }
          })
        }
      })
    },
    obtain () {
      this.borrowType = false
      // let JZBX = 0 // 报销单价
      let JZBBX = 0 // 不报销单价
      // let JZBY = 0
      // let JZFBY = 0
      let JZCN = 0 // 补贴面积上限
      console.log(this.formItem.settingList)
      let that = this
      that.formItem.settingList.forEach(function (item) {
        // if (item.type_dictionary === 'JZBX') {
        //   JZBX = item.three_dictionary
        // }
        if (item.type_dictionary === 'JZBBX') {
          JZBBX = item.three_dictionary
        }
        if (item.type_dictionary === 'JZCN') {
          JZCN = item.three_dictionary
        }
      })
      // if (!this.formItem.subsidy_rmbone) {
      //   this.formItem.subsidy_rmbone = JZBX
      // }
      let actual = parseFloat(this.formItem.fc_m2)
      let subsidy_mode = parseFloat(this.formItem.subsidy_mode)
      if (this.formItem.fc_m2 && this.formItem.subsidy_mode) {
        if (actual <= JZCN) {
          console.log('小于60')
          this.formItem.subsidy_m2up = actual
          this.formItem.subsidy_rmb = actual * this.formItem.subsidy_rmbone * subsidy_mode * 0.01
          this.formItem.persion_rmb = actual * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          // this.formItem.persion_rmb = actual * JZBBX * (1 - subsidy_mode * 0.01)
          this.formItem.persion_rmb = this.formItem.persion_rmb.toFixed(2)
          this.formItem.subsidy_rmb = this.formItem.subsidy_rmb.toFixed(2)
          console.log(this.formItem.persion_rmb, 'this.formItem.persion_rmb')
        } else if (actual > JZCN) {
          console.log('大于60')
          this.formItem.subsidy_m2up = JZCN
          this.formItem.subsidy_rmb = this.formItem.subsidy_m2up * this.formItem.subsidy_rmbone * subsidy_mode * 0.01
          let persion_m2 = (this.formItem.fc_m2 - this.formItem.subsidy_m2up).toFixed(5)
          this.formItem.persion_rmb = persion_m2 * JZBBX + this.formItem.subsidy_m2up * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          // this.formItem.persion_rmb = (this.formItem.fc_m2 * 100 - this.formItem.subsidy_m2up * 100) * 0.01 * JZBBX + this.formItem.subsidy_m2up * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          // this.formItem.persion_rmb = this.formItem.subsidy_m2up * JZBBX * (1 - subsidy_mode * 0.01) + (this.formItem.fc_m2 - this.formItem.subsidy_m2up) * JZBBX
          console.log(this.formItem.persion_rmb.toFixed(2), Number(this.formItem.persion_rmb), Number(this.formItem.persion_rmb), '================================')
          this.formItem.persion_rmb = this.formItem.persion_rmb.toFixed(2)
          this.formItem.subsidy_rmb = this.formItem.subsidy_rmb.toFixed(2)
        }
      } else {
        this.formItem.subsidy_m2up = '0'
        this.formItem.persion_rmb = '0'
        this.formItem.subsidy_rmb = '0'
      }
      this.$nextTick(() => {
        this.borrowType = true
      })
    },
    clearInfo () {
      console.log(this.list, '[][][][][][][][][]')
      this.formItem = {
        ...this.paramsData,
        jz_mode: '借住房屋',
        subsidy_mode: this.list[0],
        fc_m2: 0,
        subsidy_rmb: 0,
        subsidy_rmbone: 0,
        persion_rmb: 0,
        subsidy_m2up: 0
      }
    },
    updatejzMode (item) {
      this.formItem.jz_mode = item
      console.log(this.formItem.jz_mode, 'this.formItem.jz_mode')
      this.$emit('init', '')
    },
    getUserInfo () {
      let data = {
        method: 'selectUserType',
        card_no: this.formItem.person_card_no,
        // card_no: '211382199611083135',
        // type: '1'
        type: this.formItem.type,
        check: '1'
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          let formItem = {
            settingList: res.data.data.settingList
          }
          this.formItem.settingList = formItem.settingList
          let list = []
          if (formItem.settingList) {
            formItem.settingList.forEach(function (item) {
              if (item.type_dictionary === 'BJZBY') {
                console.log(item.three_dictionary)
                list.push(parseFloat(item.three_dictionary))
              }
              if (item.type_dictionary === 'BJZFBY') {
                console.log(item.three_dictionary)
                list.push(parseFloat(item.three_dictionary))
              }
              if (item.type_dictionary === 'JZBY') {
                console.log(item.three_dictionary)
                list.push(parseFloat(item.three_dictionary))
              }
              if (item.type_dictionary === 'JZFBY') {
                console.log(item.three_dictionary)
                list.push(parseFloat(item.three_dictionary))
              }
            })
          }
          this.RadioGroupType = false
          list = list.sort((a, b) => b - a)
          this.$nextTick(() => {
            this.RadioGroupType = true
          })
          this.list = list
          if (!this.formItem.operation || this.formItem.operation === '1') {
            let JZBX = 0
            console.log('bush99999999999999999999999999')
            formItem.settingList.forEach(function (item) {
              if (item.type_dictionary === 'JZBX') {
                JZBX = parseFloat(item.three_dictionary)
              }
            })
            if (!this.formItem.subsidy_rmbone || this.formItem.subsidy_rmbone === 0) {
              this.formItem.subsidy_rmbone = JZBX
            }
          }
        } else {
          this.$Notice.error({
            title: '订单创建失败',
            desc: res.data.errmsg
          })
          this.$router.go(-1)
        }
      })
    }
  },
  mounted () {
    this.formItem = this.paramsData
    if (!this.paramsData.d_address) {
      let address = this.paramsData.address.replace(' ', '')
      address = address.replace('辽宁省', '')
      address = address.replace('沈阳市', '')
      this.formItem.d_address = address
      this.formItem.a_address = address
    } else {
      let address = this.paramsData.address.replace('辽宁省', '')
      address = address.replace('沈阳市', '')
      address = address.replace(' ', '')
      this.formItem.a_address = address
    }
    console.log(this.formItem.operation, '-=-=-==-=-=-=-=-=-=-=-')
    if (!this.formItem.operation || this.formItem.operation === '1') {
      let list = []
      // if (!this.formItem.subsidy_mode) {
      //   this.clearInfo()
      // }
      // this.clearInfo()
      if (this.formItem.settingList) {
        let JZBX = 0
        let JZBY = 0
        let JZFBY = 0
        this.formItem.settingList.forEach(function (item) {
          if (item.type_dictionary === 'BJZBY') {
            console.log(item.three_dictionary)
            list.push(parseFloat(item.three_dictionary))
          }
          if (item.type_dictionary === 'BJZFBY') {
            console.log(item.three_dictionary)
            list.push(parseFloat(item.three_dictionary))
          }
          if (item.type_dictionary === 'JZBY') {
            console.log(item.three_dictionary)
            list.push(parseFloat(item.three_dictionary))
          }
          if (item.type_dictionary === 'JZFBY') {
            console.log(item.three_dictionary)
            list.push(parseFloat(item.three_dictionary))
          }
          if (item.type_dictionary === 'JZBY') {
            JZBY = parseFloat(item.three_dictionary)
          }
          if (item.type_dictionary === 'JZFBY') {
            JZFBY = parseFloat(item.three_dictionary)
          }
          if (item.type_dictionary === 'JZBX') {
            JZBX = parseFloat(item.three_dictionary)
          }
        })
        console.log('0000000000000000000000000000000000000000000000000000000')
        if (!this.formItem.subsidy_rmbone || this.formItem.subsidy_rmbone === 0) {
          console.log('0000000000000000000000000000000000000000000000000000000')
          this.formItem.subsidy_rmbone = JZBX
          console.log(this.formItem.subsidy_rmbone, '////////////////////////////')
        }
        if (this.paramsData.subsidy_type === '610' || this.paramsData.subsidy_type === '620') {
          this.formItem.subsidy_mode = JZBY
        } else {
          this.formItem.subsidy_mode = JZFBY
        }
        this.RadioGroupType = false
        list = list.sort((a, b) => b - a)
        this.$nextTick(() => {
          this.RadioGroupType = true
        })
        this.list = list
      } else {
        this.getUserInfo()
      }
    } else {
      this.getUserInfo()
    }
    console.log('this.formItem.subsidy_mode')
    if (!this.formItem.operation || this.formItem.operation === '1') {
      if (!this.formItem.jz_mode) {
        this.clearInfo()
      }
    }
    let data = {
      id: '2'
    }
    data = JSON.stringify(data)
    this.getMailList(data, 'cityList')
    if (this.formItem.fc_no) {
      this.fc_no = this.formItem.fc_no
    } else {
      this.fc_no = ''
    }
    // if (!this.formItem.operation) {
    //   this.clearInfo()
    // }
  },
  watch: {
    // 监听英文名只能输入英文和数字
    fc_no: function () {
      console.log('[[[[[[[[[[[[[[[[[')
      this.fc_no = this.fc_no.replace(/[\W]/g, '')
      this.formItem.fc_no = this.fc_no
    }
  }
}
</script>
<style>
.inputClass {
  display: inline-block;
  width: 100%;
  position: relative;
  vertical-align: middle;
  line-height: normal;
}
.borrow-input {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  top: 1.5px;
}
.borrow-input:hover {
  border-color: #57a3f3;
}
</style>
